
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title>建材猫</title>
        <link rel="stylesheet" type="text/css" href="css/aui.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <style>
            header{
                background: #fff;
                font-size: 14px;
            }
            .aui-nav .aui-bar-tab {
                border-top: 1px solid #eee;
            }
            .title2{
                text-align: center;
                /*padding: 10px;*/
                position: relative;
            }
            .edit{
                position: absolute;
                right: 15px;
                font-size: 12px;
                /*top: 50%;
                margin-top:-6px;*/
                z-index: 999;
            }
            .hidde{
                display: none;
            }
            .showHeader{
                display: block;
            }
            .header1,.header2,.header3{
                /*padding:10px 10px;*/
                line-height: 45px;
                height: 45px;
            }
            .header1{
                padding:0 15px;
            }
            .header1 .aui-title{
                left: 85px;
                right:60px;
                width: auto !important;
            }
            .header1 .aui-iconfont{
                font-size: 18px;
                line-height: 45px;
                height: 45px;
                padding-left:4px;
            }
            .aui-searchbar-wrap{
                background: none;
                height: 45px;
            }
            .aui-searchbar{
                background: #ebeced;
            }
            .aui-iconfont.aui-icon-search{
                line-height: inherit;
            }
            /*人脉圈*/
            .header3{
                position: relative;
                height: 45px;
            }
            .header3 .aui-tab-nav.aui-tab-border{
                border-color:#fff;
            }
            .header3 .aui-tab-nav.aui-tab-border li{
                height: 35px;
                line-height: 35px !important;
                color:#fff;
                background: transparent;
            }
            .header3 .aui-list-view{
                margin-bottom: 8px;
            }
            .header3  .aui-tab-nav.aui-tab-border li.active{
                color: #327afa;
                background: #fff;
                border-bottom: 2px #327afa solid;
            }
            .header3 .header-icon{
                position: absolute;
                top:50%;
                margin-top: -16px;
                right: 15px;
                color:#fff;
            }
            .header3 .header-icon .aui-icon-add{
                margin-right:8px;
            }
            .header3 .header-icon .aui-iconfont{
                font-size: 20px;
            }
            .header3 .aui-tab-nav{
                width: 50%;
                margin: 0 auto;
                font-size: 13px;
                border:1px solid #fff;
                height: 35px;
                line-height: 35px !important;
            }
            .aui-nav .aui-bar-tab .active{
                color:#327afa;
            }
            .aui-searchbar{
                -webkit-box-pack:start;
            }
            .menuRgiht{
                position: relative;
            }
            .menuRgiht:before{
                position: absolute;
                content:"\e661";
                top:0;
                right:-15px;
                font-family: "auiicon" !important;
            }
            .header3{
                overflow: hidden;
            }
            .header3 li{
                width: 25%;
                height: 30px;
                line-height: 30px;
                float: left;
                position: relative;
            }
            .header3 li.active span:before{
                content: "";
                width: 100%;
                bottom: 0;
                height: 2px;
                left: 0;
                position: absolute;
                background: #ff3333;
            }

            .header3 li.active span{
                display: inline-block;
                position: relative;
            }
            .hideFooter{
                display: none;
            }
        </style>
    </head>
    <body>
        <header class="" id="aui-header aui-border-b">
            <!-- 首页 -->
            <div class=" header1  hidde aui-border-b " id="header-title">
                <span class="aui-pull-left " tapmode onclick="openToTwo('html/wareHouse_win')"><em class="wareHouse">广东仓</em><i class="aui-iconfont aui-icon-unfold"></i></span>
                <div class="aui-title">
                    <div class="aui-searchbar-wrap demo" id="search">
                        <div class="aui-searchbar aui-border-radius" tapmode onclick="openToTwo('html/search')">
                                <i class="aui-iconfont aui-icon-search"></i>
                                <div class="aui-searchbar-text">搜索你想要的商品名称</div>
                                <div class="aui-searchbar-input">
                                    <form action="javascript:search();">
                                        <input type="search" placeholder="搜索你想要的商品名称" id="search-input">
                                    </form>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 快速采购 -->
            <div class="title2 header2 hidde  aui-border-b">
                <span>商品分类</span>
            </div>
            <!-- 购物车 -->
            <div class="title2 header3 hidde aui-border-b">
                <span>购物车(18)</span>
                <!--<span class="edit " tapmode onclick="edit(this)">编辑</span>-->
            </div>
        </header>
        <footer class="aui-nav" id="aui-footer">
            <ul class="aui-bar-tab">
                <li class="active" id="tabbar1" tapmode onclick="randomSwitchBtn(this,'首页',0)">
                    <span class="aui-iconfont aui-icon-home"></span>
                    <p>
                        首页
                    </p>
                </li>
                <li id="tabbar2" tapmode onclick="randomSwitchBtn(this,'分类',1)">
                    <span class="aui-iconfont aui-icon-cascades"></span>
                    <p>
                        分类
                    </p>
                </li>
                <li id="tabbar3" tapmode onclick="randomSwitchBtn(this,'购物车',2)">
                    <span class="aui-iconfont aui-icon-cart"></span>
                    <p>
                        购物车
                    </p>
                </li>
                <li id="tabbar4" tapmode onclick="randomSwitchBtn(this,'进货单',3)">
                    <span class="aui-iconfont aui-icon-people"></span>
                    <p>
                        我的
                    </p>
                </li>
            </ul>
        </footer>
    </body>
    <script type="text/javascript" src="script/api.js"></script>
    <script type="text/javascript" src="script/common.js"></script>
    <script type="text/javascript" src="script/myInfo.js"></script>
    <script type="text/javascript" src="script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="script/mui.js"></script>
    <script type="text/javascript">
        apiready = function() {
            $api.clearStorage();
            back();
            if(api.pageParam.name){
                $(".wareHouse").text(api.pageParam.name);
            }
            mask=mui.createMask();
            api.parseTapmode();
            var header = $api.dom('header');
            //$api.fixStatusBar(header);
            api.setStatusBarStyle({
                  style : 'light'
            });
            header_h = $api.offset(header).h;
            body_h = $api.offset($api.dom('body')).h;
            footer_h = $api.offset($api.byId('aui-footer')).h;
            api.openFrameGroup({
                name : 'footer_tab_nav',
                scrollEnabled : false,
                rect : {
                    x : 0,
                    y : header_h,
                    w : 'auto',
                    h : body_h - header_h - footer_h
                },
                index : 0,
                preload : 1,
                frames : [{
                    name : 'footer_tab_1',
                    url : 'html/footer_tab_1.html',
                    bounces : false,
                    vScrollBarEnabled : false,
                    hScrollBarEnabled : false
                }, {
                    name : 'footer_tab_2',
                    url : 'html/footer_tab_2.html',
                    bounces : false,
                    vScrollBarEnabled : false,
                    hScrollBarEnabled : false
                }, {
                    name : 'footer_tab_3',
                    url : 'html/footer_tab_3.html',
                    bounces : false,
                    vScrollBarEnabled : false,
                    hScrollBarEnabled : false
                }, {
                    name : 'footer_tab_4',
                    url : 'html/footer_tab_4.html',
                    bounces : false,
                    vScrollBarEnabled : false,
                    hScrollBarEnabled : false
                }]
            }, function(ret, err) {
                var footer = $api.byId('aui-footer');
                var footerAct = $api.dom(footer, '.aui-bar-tab li.active');
                $api.removeCls(footerAct, 'active');
                var name = ret.name;
                var index = ret.index;
                    showHeader(index);
                    header_h=$("header").height();
                    $("footer").removeClass("hideFooter");
                if (index == 0) {
                    $api.addCls($api.byId('tabbar1'), 'active');
                    api.setFrameGroupAttr({
                        name: 'footer_tab_nav',
                        rect : {
                            x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
                        }
                    });
                } else if (index == 1) {
                    $api.addCls($api.byId('tabbar2'), 'active');
                    api.setFrameGroupAttr({
                        name: 'footer_tab_nav',
                        rect : {
                            x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
                        }
                    });
                } else if (index == 2) {
                    $("footer").addClass("hideFooter");
                    api.setFrameGroupAttr({
                        name: 'footer_tab_nav',
                        rect : {
                            x : 0, y : 0, w : 'auto', h : 'auto'
                        }
                    });
                } else if (index == 3) {
                    $api.addCls($api.byId('tabbar4'), 'active');
                    api.setFrameGroupAttr({
                        name: 'footer_tab_nav',
                        rect : {
                            x : 0, y : header_h, w : 'auto', h : body_h - header_h - footer_h
                        }
                    });
                }
            });
            //重新登录监听
            api.addEventListener({
                name : 'reGetMyInfo'
            }, function(ret) {
                if (ret && ret.value) {
                    isLogin();
                }
            });
            //监听云修复
            api.addEventListener({
                name : 'smartupdatefinish'
            }, function(ret, err) {
                api.toast({
                    msg : '系统有新的更新了，请重新启动查看',
                    duration : 2000,
                    location : 'bottom'
                });
            });
            //网络断开的监听
            api.addEventListener({
                name : 'offline'
            }, function(ret, err) {
                api.toast({
                    msg : '网络连接失败请检查您的网络',
                    duration : 2000,
                    location : 'bottom'
                });
            });
            //接收goToCar的去到购物车的页面监听
            api.addEventListener({
                name:"goToCar"
            },function(ret){
                if(ret && ret.value){
                    randomSwitchBtnBakHome(2);
                }
            })
            //接收wareHouse_frm页面传过来的选择值，修改仓库
            api.addEventListener({
                name:"checkWareHouse"
            },function(ret){
                if(ret && ret.value){
                    $(".wareHouse").text(ret.value.name);
                }
            })

        }
        function randomSwitchBtn(obj, name, index) {
            getStorageAll();
            user_id="d";
            if (!user_id && index > 1) {
                api.openWin({
                    name : 'loginPass_win',
                    url : 'html/loginPass_win.html'
                })
            }else {
                var footer = $api.byId('aui-footer');
                var footerAct = $api.dom(footer, '.aui-bar-tab li.active');
                $api.removeCls(footerAct, 'active');
                $api.addCls(obj, 'active');
                api.setFrameGroupIndex({
                    name : 'footer_tab_nav',
                    index : index,
                    scroll : true,
                    reload : false
                });
            }
        }
        function randomSwitchBtnBakHome(index) {
            var footer = $api.byId('aui-footer');
            var footerAct = $api.dom(footer, '.aui-bar-tab li.active');
            $api.removeCls(footerAct, 'active');
            $api.addCls($api.byId('tabbar' + (index + 1)), 'active');
            api.setFrameGroupIndex({
                name : 'footer_tab_nav',
                index : index,
                scroll : true,
                reload : false
            });
        }

        //显示不同的header
        function showHeader(type){
            $(".hidde").removeClass("showHeader");
            $(".header"+(parseInt(type)+1)).addClass("showHeader");
        }
    </script>
</html>